<template>
<div>
<table class="orders">
  <thead>
  <tr>
  <th>商品	</th>
  <th style="text-align: center">订单详情</th>
  <th style="text-align: right">收货人</th>
  <th style="text-align: right">金额	</th>
  <th style="text-align: right">状态</th>
  <th style="text-align: center">操作</th>
  </tr>
  </thead>
</table>
  <div>
  <table class="order-item" v-for="(order,index) in myOrder" style="font-size: 12px" :key="order.id">
  <thead>
  <tr>
    <th>{{order.createTime}}&nbsp;&nbsp;&nbsp;订单编号:{{order.outTradeNo}}</th>
  </tr>
  </thead>
    <tbody v-for="(orders,index) in order.orderDetailList" style="text-align: center" :key="orders.id">
    <td style="border: 1px solid #e6e6e6">
      <img :src="orders.imgUrl" style="width: 100px;height: 100px;float:left;"/>
      <a href="javascript:void(0)" style="width: 250px;color: #e1251b;float:left;text-align: left">{{orders.skuName}}</a>
     <div style="float:left;width: 90px">
      <span style="margin-left: 10px">x{{orders.skuNum}}</span>
      <a href="javascript:void(0)" style="margin-left: 10px;color: #666">售后申请</a>
     </div>
    </td>
    <td style="border: 1px solid #e6e6e6;width:100px">{{order.consignee}}</td>
    <td style="border: 1px solid #e6e6e6;width:200px">总金额￥{{orders.orderPrice}}在线支付</td>
    <td style="border: 1px solid #e6e6e6">{{orders.orderStatusName}}</td>
    <td style="border: 1px solid #e6e6e6;width: 80px" rowspan="3">未支付</td>
    <td style="border: 1px solid #e6e6e6;width: 100px">评价|晒单</td>
    </tbody>
  </table>
  </div>
  <el-pagination
      :page-sizes="[1, 2, 3, 4]"
      :page-size="limit"
      :current-page.sync="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
      :total="20">
  </el-pagination>
</div>
</template>

<script>
export default {
  name: "myOrder",
  data() {
    return {
      page:4,
      limit:2,
      myOrder: {},
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleCurrentChange(val){
      this.page=val
      this.getData()
    },
    handleSizeChange(val){
      this.limit=val
    this.getData()
    },
    async getData(){
      const {page,limit}=this
      let result=await this.$API.reqMyOrderList(page,limit)
      if(result.data.code==200){
        this.myOrder=result.data.data.records
      }
    }
  }
}
</script>

<style scoped lang="less">
.order-item{
  width: 100%;
}
.orders{
  border: 1px solid #e6e6e6;
  border-collapse: separate;
  border-radius: 2px;
  background-color: #f4f4f4;
  width: 100%;
  border-spacing: 0;
}
th{
  padding: 6px 8px;
  color: #666;
  font-size: 12px;
  text-align: left;
}
.el-pagination{
  margin-top: 50px;
  text-align: center;
}
</style>
